<template>
  <div class="Details">
    <headerTop :hot="title" :isActive="true"></headerTop>
    <div class="detailsContent">
      <div
        class="itemList"
        v-for="(item, index) in data"
        :key="item.id"
        @click="getArticles(item.id, item.category)"
      >
        <div class="left">
          <img :src="item.cover" alt="" />
          <div :style="colors(index)">No.{{ index + 1 }}</div>
        </div>
        <div class="right">
          <span>{{ item.title }}</span>
          <div>{{ item.subtitle }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerTop from "@/components/headerTop";
import { getHot } from "@/api/find";
export default {
  name: "hotListDetails",
  components: {
    headerTop,
  },
  data() {
    return {
      title: JSON.parse(this.$route.query.title),
      id: this.$route.query.id,
      data: [],
    };
  },
  created() {
    this.getHotDeatil();
  },
  methods: {
    async getHotDeatil() {
      const { data } = await getHot("/" + this.id);
      this.data = data;
      console.log("榜单内容", data);
    },
    getArticles(id, category, title) {
      // 跳转到文章详情页
      console.log("点击了", id, category);
      if (category === 1) {
        console.log("跳转的id", id);
        this.$router.push({
          path: "/articlesPage",
          query: {
            id: id,
            category: category,
            title: JSON.stringify([{ title: "阅读" }]),
            //  title:  encodeURIComponent(title),
            titleTR: encodeURIComponent("阅读"),
          },
        });
      } else if (category === 3) {
        this.$router.push({
          path: "/answer",
          query: {
            id: id,
            category: category,
            title: JSON.stringify([{ title: "问答" }]),
            //  title:  encodeURIComponent(title),
            titleTR: encodeURIComponent("问答"),
          },
        });
      }
    },
  },
  computed: {
    colors() {
      return (i) => {
        //js闭包传值操作
        if (i === 0) {
          return { background: "#D80505" };
        } else if (i === 1) {
          return { background: "#FF5555" };
        } else {
          return { background: "#FFA100" };
        }
      };
    },
  },
};
</script>

<style lang="less" scoped>
.Details {
  .detailsContent {
    padding: 50px 15px 0px 15px;
    .itemList {
      display: flex;
      margin-bottom: 20px;
      .left {
        position: relative;
        color: #fff;
        font-size: 14px;
        img {
          width: 80px;
          border-radius: 10px;
        }
        & > :nth-child(2) {
          position: absolute;
          top: 0;
          width: 40px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          border-top-left-radius: 10px;
          border-bottom-right-radius: 10px;
        }
      }

      .right {
        margin-left: 20px;
        span {
          font-size: 18px;
          color: #000;
        }
        & > :nth-child(2) {
          font-size: 14px;
          color: #cbcbcb;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>